<template>
  <div>
    <siteHeader :header="header"></siteHeader>
    <el-main>
      <el-row>
        <el-col
          class="border"
          :xs="{span: 24, offset: 0}"
          :sm="{span: 18, offset: 3}"
          :md="{span: 14, offset: 5}"
          :lg="{span: 10, offset: 7}"
          :xl="{span: 8, offset: 8}"
        >
          <el-form
            :model="model"
            :rules="rules"
            ref="rules"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="model.projectName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="试验联系人" prop="owner">
              <el-input v-model="model.owner" placeholder="请输入试验联系人"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="model.phone"
                placeholder="请输入试验联系人手机号"
                clearable
                prefix-icon="el-icon-phone"
              ></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="start_time">
              <el-date-picker
                type="datetime"
                v-model="model.start_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end_time">
              <el-date-picker
                type="datetime"
                v-model="model.end_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item label-width="120px" label="试验方案" prop="methodURL">
              <el-upload
                ref="methodURL"
                :limit="1"
                :action="$http.defaults.baseURL+'/upload/uploadMethod'"
                :before-upload="methodBeforeUpload"
                accept=".pdf"
                :on-success="afterUploadMethod"
              >
                <el-button size="small" type="primary" icon="el-icon-upload">上传试验方案</el-button>
                <div slot="tip" class="el-upload__tip">请扫描成pdf后上传，大小不超过 20MB</div>
              </el-upload>
            </el-form-item>
            <el-form-item label-width="140px" label="安全卫生协议" prop="agreementURL">
              <el-upload
                ref="agreementURL"
                :limit="1"
                :action="$http.defaults.baseURL+'/upload/uploadAgreement'"
                :before-upload="agreementBeforeUpload"
                accept=".pdf"
                :on-success="afterUploadAgreement"
              >
                <el-button size="small" type="primary" icon="el-icon-upload">上传安全卫生协议</el-button>

                <div slot="tip" class="el-upload__tip">请扫描成pdf后上传，大小不超过 20MB</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="试验简介" prop="description">
              <el-input
                v-model="model.description"
                placeholder="请说明添加项目的必要信息，方便管理员查看"
                type="textarea"
                rows="5"
                maxlength="60"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="(createProject('rules'))">申请创建</el-button>
            </el-form-item>
          </el-form>
          <p style="color:#909399;font-size:14px;">
            <strong>*注意</strong>：1、相关文件模板请前往&nbsp;
            <strong>主页</strong>=>
            <strong>文件中心</strong>选中对应文件进行下载
            <br />2、您的项目未审核通过前,您都可以在&nbsp;
            <strong>主页</strong>=>
            <strong>我的项目</strong>=>
            <strong>详情</strong>
            中进行查看、修改等操作。
          </p>
        </el-col>
      </el-row>
    </el-main>
    <siteFooter></siteFooter>
  </div>
</template>

<style lang="scss" scoped>
@import "../../assets/styles/box-border.scss";
</style>>

<script>
export default {
  data() {
    return {
      header: {
        menu: "新建项目",
        toPageName: "返回主页",
        to: "/home"
      },
      model: {
        projectName: "",
        owner: "",
        phone: "",
        description: "",
        start_time: "",
        end_time: "",
        methodURL: "",
        agreementURL: "",
        token: ""
      },
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "change"
          }
        ],
        owner: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]{2,4}$/,
            message: "长度在 2 到 4 个字符的中文",
            trigger: "change"
          }
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: "请输入正确的手机号，有效手机号为13-18开头",
            trigger: "change"
          }
        ],
        description: [
          {
            required: true,
            message: "请输入申请理由，用于审核",
            trigger: "change"
          },
          {
            min: 6,
            max: 60,
            message: "长度在 6 到 60 个字符",
            trigger: "change"
          }
        ],
        start_time: [
          { required: true, message: "请选择开始时间", trigger: "change" }
        ],
        end_time: [
          { required: true, message: "请选择结束时间", trigger: "change" }
        ],
        methodURL: [
          {
            required: true,
            message: "请选择上传的文件，不能为空",
            trigger: "change"
          }
        ],
        agreementURL: [
          {
            required: true,
            message: "请选择上传的文件，不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  components: {
    // BmLocalSearch
  },
  methods: {
    methodBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let isAccept = new RegExp(".pdf").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择.pdf类型的文件");
      }
      return isRightSize && isAccept;
    },
    agreementBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let isAccept = new RegExp(".pdf").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择.pdf类型的文件");
      }
      return isRightSize && isAccept;
    },
    afterUploadMethod(res) {
      if (res.code == 200) {
        //这里只用获取到名称就行了，主要是为了后面提交文件的时候把名称存到数据库中
        this.model.methodURL = res.data.methodURL;
        this.$message.success("试验方案文件传输成功");
      } else {
        this.$message.error("试验方案文件传输失败");
      }
    },
    afterUploadAgreement(res) {
      if (res.code == 200) {
        //这里只用获取到名称就行了，主要是为了后面提交文件的时候把名称存到数据库中
        this.model.agreementURL = res.data.agreementURL;
        this.$message.success("安全卫生协议文件传输成功");
      } else {
        this.$message.error("安全卫生协议文件传输失败");
      }
    },
    async createProject(rules) {
      this.$refs[rules].validate(valid => {
        if (valid) {
          this.model.token = this.$store.state.token;
          //trim()函数是去掉两边空格的
          this.model.projectName = this.model.projectName.trim();
          this.model.owner = this.model.owner;
          this.model.phone = this.model.phone;
          this.model.description = this.model.description;
          this.model.start_time = this.model.start_time;
          // console.log(typeof this.model.start_time);
          // console.log(this.model.start_time);
          this.model.end_time = this.model.end_time;
          this.model.agreementURL = this.model.agreementURL;
          this.model.methodURL = this.model.methodURL;
          this.$http.post("project/createProjectById", this.model).then(res => {
            if (res.data.code == 200) {
              this.$message.success(
                `添加项目 ${res.data.data} 成功，等待管理员审核`
              );
              //想要实现返回的效果，其实就只用加上这一句代码就行了
              this.$router.push("/home");
            }
            if (res.data.code == 300) {
              this.$message.error("请不要重复添加");
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>